<template>
  <div class="project-wrapper">
    <div class="tool-list">
      <!-- 工具栏 -->
      <div class="tool">
        <div class="text-main-content">共 {{ total }} 条记录</div>
        <div class="flex">
          <el-input
            v-model="searchStr"
            placeholder="输入关键字查询"
            class="rounded-content-wrap mr-[10px]"
            clearable
            @change="handleSearch"
          >
            <template #prefix>
              <i class="el-icon-search el-input__icon text-[20px]"></i>
            </template>
          </el-input>
          <!-- <el-button class="rounded-content-wrap" type="primary" plain
            >批量导出</el-button
          > -->
          <el-button class="rounded-content-wrap" type="primary" @click="handleAdd"
            >新增会员成员</el-button
          >
        </div>
      </div>
      <!-- 列表 -->
      <div class="list">
        <el-table
          ref="table"
          v-loading="loading"
          row-key="id"
          show-overflow-tooltip
          :data="dataList"
          @selection-change="handleSelectionChange"
        >
          <el-table-column reserve-selection width="50px" type="selection"></el-table-column>

          <el-table-column min-width="300px" prop="name" label="会员名称">
            <template #default="{ row }">
              <div class="flex items-center space-x-4">
                <el-image
                  class="rounded-[4px] w-[42px] h-[42px] flex-none"
                  :src="getFirstImage(row)"
                  fit="fill"
                ></el-image>
                <span>{{ row.data.name }}</span>
                <el-tag v-if="row.data.invalid" size="mini" type="danger">已失效</el-tag>
              </div>
            </template>
          </el-table-column>

          <el-table-column min-width="100px" prop="data.typeLabel" label="商会职位" />

          <el-table-column min-width="100px" prop="data.belongEnterpriseLabel" label="所在企业" />

          <el-table-column min-width="100px" prop="data.enterprisePosition" label="企业职位" />

          <el-table-column min-width="100px" prop="data.phone" label="联系电话" />

          <el-table-column width="100px" label="操作">
            <template #default="{ row }">
              <div class="space-x-1">
                <a @click="edit(row._id)">编辑</a>
                <span>|</span>
                <el-popconfirm title="确定删除吗？" @confirm="del(row._id)">
                  <a slot="reference">删除</a>
                </el-popconfirm>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页器 -->
      <div class="foot-pagination">
        <div class="flex items-center space-x-2">
          <div>
            第 <b>{{ `${pagination.pageNum}/${total}` }}</b> 页
          </div>
          <div>
            已选中 <b>{{ selected.length }}</b> 条记录
          </div>
        </div>
        <div>
          <el-pagination
            layout="total, prev, pager, next, jumper"
            :current-page.sync="pagination.pageNum"
            :total="total"
            :page-size.sync="pagination.pageSize"
            @current-change="fetchData()"
            @size-change="fetchData()"
          ></el-pagination>
        </div>
      </div>

      <AddEditMember ref="addEdit" @onRefresh="fetchData()" />
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import AddEditMember from '@/components/admin/manage/member/AddEditMember.vue'
import tableMixin from '@/components/admin/manage/carrier/common/tableMixin'
import { ActionsType } from '@/actions/tree'
export default Vue.extend({
  components: { AddEditMember },
  mixins: [tableMixin('B_CONSOLE_MEMBER')],
  head: {
    title: '商会成员列表',
  },
  created() {
    this.$store.dispatch(ActionsType.getIndustryTag)
    this.$store.dispatch(ActionsType.getArea)
  },
})
</script>
<style lang="scss" scoped>
.project-wrapper {
  @apply h-full bg-white rounded-content-wrap px-5;

  .tool-list {
    @apply h-full flex flex-col justify-between;
  }

  .tool {
    @apply flex justify-between items-center h-[96px];
  }

  .list {
    @apply flex-1 overflow-y-auto;
  }

  .foot-pagination {
    @apply flex-none
          border-t border-solid border-gray-200
          h-[104px]
          flex
          items-center
          justify-between;
  }
}
</style>
